<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        body,html{
            text-align: center;
        }
        #editDiv{
            width:1000px;
            display: inline-block;
            height: 800px;
            background:#fff;
            border-radius:10px;
            line-height: 20px;
            padding:10px;
            font-size: 14px;
            color:#666;
            resize: none;
            outline: none;
            overflow-y: scroll;
        }
        #editDiv{
            border:1px solid #333;
            border-color:rgba(169,169,169,1);
            text-align: left;
        }
    </style>
</head>
<body>
<img src="">

<!--<div id="editDiv" contenteditable="true">-->
</div>
</body>
<script src="js/jquery.min.js"></script>
<script>
    document.querySelector('#editDiv').addEventListener('paste',function(e){
        var cbd = e.clipboardData;
        var ua = window.navigator.userAgent;
        // 如果是 Safari 直接 return
        if ( !(e.clipboardData && e.clipboardData.items) ) {
            return ;
        }
        // Mac平台下Chrome49版本以下 复制Finder中的文件的Bug Hack掉
        if(cbd.items && cbd.items.length === 2 && cbd.items[0].kind === "string" && cbd.items[1].kind === "file" &&
            cbd.types && cbd.types.length === 2 && cbd.types[0] === "text/plain" && cbd.types[1] === "Files" &&
            ua.match(/Macintosh/i) && Number(ua.match(/Chrome\/(\d{2})/i)[1]) < 49){
            return;
        }
        for(var i = 0; i < cbd.items.length; i++) {
            var item = cbd.items[i];
            if(item.kind == "file"){
                var blob = item.getAsFile();
                if (blob.size === 0) {
                    return;
                }
                // blob 就是从剪切板获得的文件 可以进行上传或其他操作
                /*-----------------------与后台进行交互 start-----------------------*/
                /*var data = new FormData();
                 data.append('discoverPics', blob);
                 $.ajax({
                 url: '/discover/addDiscoverPicjson.htm',
                 type: 'POST',
                 cache: false,
                 data: data,
                 processData: false,
                 contentType: false,
                 success:function(res){
                 var obj = JSON.parse(res);
                 var wrap = $('#editDiv');
                 var file = obj.data.toString();
                 var img = document.createElement("img");
                 img.src = file;
                 wrap.appendChild(img);
                 },error:function(){

                 }
                 })*/
                /*-----------------------与后台进行交互 end-----------------------*/
                /*-----------------------不与后台进行交互 直接预览start-----------------------*/
                var reader = new FileReader();
                var imgs = new Image();
                imgs.file = blob;
                reader.onload = (function(aImg) {
                    return function(e) {
                        aImg.src = e.target.result;
                    };
                })(imgs);
                reader.readAsDataURL(blob);
                document.querySelector('#editDiv').appendChild(imgs);
                /*-----------------------不与后台进行交互 直接预览end-----------------------*/
            }
        }
    }, false);
</script>
</html>